<template>
    <div class="storeInfo">
        <div class="head">    
            <el-form :model="form" class="headForm">
                
                <el-form-item label="" style="width:105px">
                    <el-select clearable v-model="form.holiday" placeholder="平日/周末">
                        <el-option v-for="(item,a) in holiday" :key="a" :label="item.name" :value="item.val"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" style="width:105px">
                    <el-select clearable v-model="form.charmber_id" placeholder="房型">
                        <el-option v-for="(item,a) in charmber" :key="a" :label="item.charmber_name" :value="item.charmber_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" style="width:105px">
                    <el-select clearable v-model="form.period_id" placeholder="档位">
                        <el-option v-for="(item,a) in period" :key="a" :label="item.name" :value="item.period_id"></el-option>
                    </el-select>
                </el-form-item>

                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button type="danger" @click="mark='add';add_edit_show=true;alerttips='添加'">添加</el-button> 


            </el-form>


                      
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center" 
            tooltip-effect="dark">
                <el-table-column prop="id" label="序号" fixed></el-table-column>
                <el-table-column prop="holiday_cn" label="平日周末"></el-table-column>
                <el-table-column prop="charmber_name" label="房型"></el-table-column>
                <el-table-column prop="period_name" label="档位"></el-table-column>
                <el-table-column prop="reduce_cn" label="酒水满减设定"></el-table-column>
                <el-table-column prop="update_time" label="更新时间"></el-table-column>

                <el-table-column prop="" label="操作" width="200">
                    <template slot-scope="scope">
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i>{{item.name}}</i>
                            <i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>          
                        
                    
                </el-table-column>
                

            </el-table>
                        
        </div>
        <!-- 分页部分 后台没有做分页 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
  

        <!-- 添加 -->
        <el-dialog :title="alerttips" :visible.sync="add_edit_show">
            <el-form :model="editForm">
                <el-form-item label="平日/周末"  :label-width="editW">
                    <el-select clearable v-model="editForm.holiday" placeholder="平日/周末">
                        <el-option v-for="item in holiday" :key='item.val' :value="item.val" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="房型" :label-width="editW">
                    <el-select clearable v-model="editForm.charmber_id" placeholder="包房类型">
                        <el-option v-for="item in charmber" :key='item.charmber_id' :value="item.charmber_id" :label="item.charmber_name"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="选择档位" :label-width="editW">
                    <el-select clearable v-model="editForm.period_id" placeholder="选择档位">
                        <el-option v-for="item in period" :key='item.period_id' :value="item.period_id" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="满减" :label-width="editW">
                    <span>酒水价格满</span>
                    <el-input class="shortinput" v-model="editForm.items_price" oninput="value=value.replace(/[^(\d+)(.\d+)?$]/g,'')"></el-input>
                    <span>减房时价</span>
                    <el-input class="shortinput" v-model="editForm.reduce_price" oninput="value=value.replace(/[^(\d+)(.\d+)?$]/g,'')"></el-input>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="add_edit_show = false">取 消</el-button>
                <el-button type="primary" @click="addyes">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>
<style lang="scss" scoped>
.shortinput{width: 100px;margin: 0 5px}
</style>
<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js';
export default {
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            holiday:[{val:'0',name:'平日'},{val:'1',name:'周末'}],
            alerttips:'',
            form:{
                size:20,
                page:1
            },//搜索内容的参数
            add_edit_show:false,//编辑、添加弹框的显示开关            
            pageNum:1,//page
            limitList:[],//权限的存储数组
            editW:'120px',
            editForm:{
                holiday:'',//平日/周末
                charmber_id:'',//房型
                period_id:'',//档位
                items_price:'',//酒水价格
                reduce_price:'',//减免价格
                
            },//编辑弹框内需要的数据
            // timev:'',
            limitList_str:'',
            charmber:[],//包房类型;
            period:[],//包房类型;
            mark:'',//标记是添加还是编辑
        }
    },
    mounted(){
        var that = this;
        abc.get(that,potUrl.reducerindex,that.form,function(res){
            that.total = res.data.length
            that.tableData =  res.data;
            that.size = that.total;
        });//列表 
        abc.get(that,potUrl.charmberIndex,{},function(res){
            // 包房类型
            that.charmber = res.data;
        })
        abc.get(that,potUrl.periodIndex,{},function(res){
            // 档位
            that.period = res.data;
        })
    },
    created(){
        var that = this;       
        that.limitList = [
            {name:'复制',url:'copy'},
            {name:'编辑',url:'edit'},
            {name:'删除',url:'del'}

        ]     
    },
    methods:{   
        search(){
           var that = this;
            abc.get(that,potUrl.reducerindex,that.form,function(res){
                that.total = res.data.length;
                that.size = that.total;
                that.tableData =  res.data;
            });//列表  
        },
        theClick(a,b){
            let that = this;
            if(a == 'edit' || a == 'copy'){  
                if(a == 'edit'){
                    that.mark = 'edit'
                }else{
                    that.mark = 'add'
                }     
                abc.get(that,potUrl.reducerdetail,{id:b.id},function(res){                  
                    that.editForm = res.data[0];//赋值给编辑的数据；
                    that.add_edit_show =true; 
                    that.alerttips = '编辑'                   
                })
            }else if(a == 'del'){
                abc.twoTips(that,potUrl.reducerdel,'是否要删除此条数据？',{id:b.id},function() {
                    that.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    abc.get(that,potUrl.reducerindex,that.form,function(res){
                        that.total = res.data.length;
                        that.size = that.total;
                        that.tableData =  res.data;
                    });//列表 
                })
            }
            
        },
        changePage(val){
            //翻页
            var that = this;
            that.pageNum = val;
            this.form.page = val;
           abc.getList(that,potUrl.reducerindex,that.form);
        },
        addyes(a){
            //添加时的确定按钮操作；
            let that = this;
            let yesurl = ''
            if(that.mark == 'add'){
                yesurl = potUrl.reduceradd
            }else{
                yesurl = potUrl.reduceredit
            }
            that.editForm.match_items = JSON.stringify(that.editForm.match_items)
            abc.post(that,yesurl,that.editForm,function(res){
                that.add_edit_show = false;
                that.editForm={
                    holiday:'',//平日/周末
                    charmber_id:'',//房型
                    period_id:'',//档位
                    items_price:'',//酒水价格
                    reduce_price:'',//减免价格
                    
                }
                abc.get(that,potUrl.reducerindex,that.form,function(res){
                    that.total = res.data.length;
                    that.size = that.total;
                    that.tableData =  res.data;
                });//列表 
            })
            
        }
    }
}

</script>